<template>
    <div class="layout-padding">
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" label-width="80px" label-suffix=":">
            <el-form-item label="名称/编码">
                <el-input v-model="query.keyword" placeholder="请输入名称/编码/简码" class="w200" clearable />  
            </el-form-item>
            <el-form-item label="商品状态">
                <el-select v-model="query.status" placeholder="请选择商品状态" clearable>
                    <el-option label="已上架" value="1" />
                    <el-option label="已下架" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="ele-Search" type="primary" @click="handleQuery()">查询</el-button>
                <el-button icon="ele-Plus" type="success" @click="handleAdd()">新增商品</el-button>
            </el-form-item>
        </el-form>
        <!-- 列表数据 -->
        <el-table ref="tableListRef" :height="tableHeight" v-loading="loading" :data="tableList" border stripe show-overflow-tooltip>
            <el-table-column fixed="left" align="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column fixed="left" align="left" header-align="center" prop="name" label="商品名称/编码" width="150">
                <template #default="{ row }">
                    <div class="flex">
                        <el-avatar shape="square" :size="50" :src="row.imageUrl"></el-avatar>
                        <div class="ml5">
                            <div>{{ row.name }}</div>
                            <el-link @click="handleEdit(row)" type="primary">{{ row.code }}</el-link>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="specsName" label="商品规格" ></el-table-column>
            <el-table-column align="center" prop="categoryName" label="所属分类" ></el-table-column>
            <el-table-column align="center" prop="quickCode" label="快捷码" ></el-table-column>
            <el-table-column align="center" prop="unitName" label="单位" ></el-table-column>
            <el-table-column align="center" prop="stockNum" label="库存" ></el-table-column>
            <el-table-column align="center" prop="price" label="销售价" ></el-table-column>
            <el-table-column align="center" prop="cost" label="库存" ></el-table-column>
            <el-table-column align="center" prop="createTime" label="入库时间" ></el-table-column>
            <el-table-column align="center" prop="statusText" label="商品状态" width="200" >
                <template #default="{row}">
                    <el-switch 
                        @click.stop
                        inline-prompt
                        v-model="row.status" 
                        :active-value="1" 
                        :inactive-value="0" 
                        active-text="已上架" 
                        inactive-text="已下架"
                        :before-change="() => changeStatus(row)"
                        :loading="row.loading" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="200">
                <template #default="{row}">
                    <el-button link type="warning" icon="ele-Edit" @click="handleEdit(row)">修改</el-button>
                    <el-popconfirm :title="`确定删除【${row.name}】吗？`" @confirm="handleDelete(row.id)">
                        <template #reference>
                            <el-button link type="danger" icon="ele-Delete" @click.stop >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <m-page :page="page" @pageChange="queryData"></m-page>
        <!-- 新增/修改组件 -->
        <goods-edit ref="editRef" @update="queryData" />
    </div>
</template>

<script setup lang="ts">
import useTablePage from '@/hooks/useTablePage';
import { getPageList, deleteById, updateStatus } from '@/api/goods/list';
import { notify } from '@/utils/element';
import { defineAsyncComponent } from 'vue';

const GoodsEdit = defineAsyncComponent(() => import('@/views/goods/componments/GoodsEdit.vue'));

const {
    editRef, tableListRef,
    loading, query, page, tableList, tableHeight,
    queryData, handleQuery, handleAdd,
    handleEdit, handleDelete
} = useTablePage<GoodsType, GoodsQuery>({getPageList, deleteById});

// 改变商品状态（上/下架）
async function changeStatus(row: GoodsType) {
    try {
        row.loading = true
        const {id, status} = row
        const newStatus = status == 0 ? 1 : 0
        const {code} = await updateStatus({id, status: newStatus})
        if (code !== 20000) return false
        notify('状态修改成功', {type: 'success'})
        return true
    } catch (error) {
        return false
    } finally {
        row.loading = false
    }
}
</script>

<style scoped>

</style>